<template>
  <div>
    <!-- 数据统计 echarts -->
    <!-- 面包屑导航 -->
  </div>
  <div
    class="image"
    v-for="(img_url, index) in img_src"
    :key="index"
    v-show="index === mark"
  >
    <img
      style="width: 100%; height: 300px"
      @mouseenter="stop"
      @mouseleave="start"
      :src="img_url.url"
      alt="这是轮播图"
    />

    <!-- <el-button class="left" @click="go_back(index)" href="#">
      <i class="el-icon-arrow-left"></i>
    </el-button>

    <el-button @click="go(index)" href="#">
      <i class="el-icon-arrow-right"></i>
    </el-button> -->
  </div>
  <div class="bottom">
    <span
      v-for="(img_url, index) in img_src"
      :key="index"
      :class="{ active: index === mark }"
    >
    </span>
  </div>

  <div class="el-card">
    <!-- 卡片 -->

    <el-card>
      <div class="title">数据统计</div>
      <div ref="passeChar" style="width: 400px; height: 400px"></div>
      <div
        class="div1"
        ref="userCheckEchar"
        style="width: 600px; height: 400px"
      ></div>
    </el-card>

    <el-card class="form" style="height: auto">
      <div class="blue">
        <el-card_header>社区公告栏</el-card_header>
      </div>
      <div>
        <el-button @click="toggle1">社区级公告</el-button>
        <el-button @click="toggle2">都市级公告</el-button>
        <el-button @click="toggle3">国家级公告</el-button>

        <!-- 第一个表 -->
        <div>
          <el-table v-if="play1" :data="third" border style="width: 100%">
            <el-table-column fixed prop="time" label="日期" width="200">
            </el-table-column>

            <el-table-column
              prop="title"
              label="公告名称"
              width="200"
            ></el-table-column>
            <el-table-column
              prop="level"
              label="等级"
              width="200"
            ></el-table-column>
          </el-table>
        </div>
        <!-- 第二个表 -->
        <el-table v-if="play2" :data="second" border style="width: 100%">
          <el-table-column fixed prop="time" label="日期" width="200">
          </el-table-column>
          <el-table-column
            prop="title"
            label="公告名称"
            width="200"
          ></el-table-column>
          <el-table-column
            prop="level"
            label="等级"
            width="200"
          ></el-table-column>
        </el-table>
        <!-- 第三个表 -->
        <el-table v-if="play3" :data="first" border style="width: 100%">
          <el-table-column fixed prop="time" label="日期" width="200">
          </el-table-column>
          <el-table-column
            prop="title"
            label="公告名称"
            width="200"
          ></el-table-column>
          <el-table-column
            prop="level"
            label="等级"
            width="200"
          ></el-table-column>
        </el-table>
      </div>
      <!-- <el-form>
          <el-form-item  v-for="(item,index) in noticeList" :key="item.id">
            {{item.content}}-----{{item.time}}
          </el-form-item>
    </el-form> -->
    </el-card>
  </div>
</template>
  
  <script>
// npm install echarts --save     https://echarts.apache.org/zh/index.html
import * as echarts from "echarts";
import { getPassStaticApi, getUserStatisticApi } from "../api/index.js";
import { getAllNoticeAPi, getAllNoticePLUSAPi } from "../api/index1.js";
export default {
  data() {
    return {
      noticeList: [],
      first: [],
      second: [],
      third: [],
      img_src: [
        { url: require("../assets/1.png") },
        { url: require("../assets/2.png") },
        { url: require("../assets/3.png") },
        { url: require("../assets/4.png") },
      ],
      mark: 0, //现在是第几张
      timer: "",
      play1: true,
      play2: false,
      play3: false,
      noticeList: [
        { id: "1", content: "新增患者1人", time: "2020-01-20" },
        { id: "2", content: "新增治愈者3人", time: "2020-01-20" },
        { id: "3", content: "死亡0人", time: "2020-01-20" },
        { id: "4", content: "防疫新增政策", time: "2020-01-20" },
      ],
      tableData: [
        {
          date: "2016-05-02",
          name: "新增治愈者3人",
        },
        {
          date: "2016-05-04",
          name: "防疫新增政策",
        },
        {
          date: "2016-05-01",
          name: "新增患者1人",
        },
        {
          date: "2016-05-03",
          name: "死亡0人",
        },
      ],
    };
  },
  methods: {
    // 6.获取所有notice的方法
    getall() {
      getAllNoticeAPi().then((res) => {
        console.log(res);
        this.noticeList = res.data;
      });
    },
    // 7.获取所有notice的方法 分等级
    getallplus() {
      getAllNoticePLUSAPi().then((res) => {
        console.log(res);
        this.first = res.data.first;
        this.second = res.data.second;
        this.third = res.data.third;
      });
    },
    recycle() {
      if (this.mark === this.img_src.length - 1) {
        this.mark = 0;
      } else {
        this.mark++;
      }
    },
    stop() {
      clearInterval(this.timer);
    },
    start() {
      this.recycle(); //先调用一次
      this.timer = setInterval(() => {
        this.recycle(), console.log("开始计时");
      }, 2000);
    },
    go(index) {
      if (index < this.img_src.length - 1) {
        this.mark = index + 1;
      }
    },
    go_back(index) {
      if (index > 0) {
        this.mark = index - 1;
      }
    },
    /**
         *all: 156
          fail: 14 未通过
          pass: 15 通过
          wait: 127 待审核
         */

    handleClick(row) {
      console.log(row);
    },
    toggle1: function () {
      this.play1 = !this.play1;
      this.play2 = false;
      this.play3 = false;
    },
    toggle2: function () {
      this.play1 = false;
      this.play2 = !this.play2;
      this.play3 = false;
    },
    toggle3: function () {
      this.play1 = false;
      this.play2 = false;
      this.play3 = !this.play3;
    },
    // 1.拿到通行证接口的数据的方法
    getPassStatic() {
      getPassStaticApi().then((res) => {
        // console.log(res)
        let obj = res.data;
        // 把请求到的数据变为我们需要的数据 对象转数组
        let arr = [];
        for (var key in obj) {
          arr.push(obj[key]);
        }
        // console.log(arr)
        // 调用绘制统计图的方法
        this.drawPass(arr);
        // console.log(arr)
      });
    },
    // 2.绘制pass通行证统计图
    drawPass(arr) {
      // 拿到dom
      let passeChar = this.$refs.passeChar;
      // 图表初始化，会得到一个通行证统计图的实例
      let mypasseChar = echarts.init(passeChar);
      // 指定统计图相关配置项
      let options = {
        title: {
          text: "通行证数量统计",
        },
        tooltip: {},
        legend: {
          data: ["数量"],
        },
        xAxis: {
          // x轴显示数据
          data: ["全部", "禁止通行", "待审核", "通过"],
        },
        yAxis: {},
        series: [
          {
            name: "数量",
            type: "bar",
            // 替换成请求回来的数据
            // data:[90,20,30,40]
            data: arr,
          },
        ],
      };
      mypasseChar.setOption(options);
    },
    /**
           *  all: 148 
              athome: 0 居家隔离
              define: 0 确诊
              fever: 1 发烧
              normal: 147 普通 正常
              suspect: 0 疑似
           */
    // 3.获取用户信息方法
    getUserStatistic() {
      getUserStatisticApi().then((res) => {
        // todo
        let obj = res.data;
        let arr = [];
        for (var key in obj) {
          arr.push(obj[key]);
        }
        this.drawCheckUser(arr);
        // console.log(res);
        // console.log(arr)
      });
    },
    // 4.绘制user 报备情况 统计图
    drawCheckUser(arr) {
      // 拿到dom
      let userCheckEchar = this.$refs.userCheckEchar;
      // 图表初始化，会得到一个通行证统计图的实例
      let myUserCheckEchar = echarts.init(userCheckEchar);
      // 指定统计图相关配置项
      let options = {
        title: {
          text: "用户确诊数量统计",
        },
        // 鼠标放上面显示数字
        tooltip: {},
        // 图例
        legend: {
          data: ["数量"],
        },
        xAxis: {
          // x轴显示数据
          data: ["全部", "正常", "确诊", "发烧", "居家隔离", "疑似"],
        },
        yAxis: {},
        series: [
          {
            name: "数量",
            type: "bar",
            // 替换成请求回来的数据
            // data:[90,20,30,40]
            data: arr,
          },
        ],
      };
      myUserCheckEchar.setOption(options);
    },
  },
  mounted() {
    this.getPassStatic();
    // this.drawPass()
    this.getUserStatistic();
    // this.getall()
    this.getallplus();
  },
};
</script>
  
  <style lang="less" scoped>
.el-card {
  width: 1300px;
  padding: 20px;
  padding-left: 10px;
  display: flex;
  .el-card__header {
    padding: 0;
  }

  .blue {
    width: 600px;
    font-family: "Courier New", Courier, monospace;
    font-weight: bold;
    background-color: rgb(127, 217, 255);
    font-size: 25px;
    text-align: center;
    line-height: 50px;
  }
}

.el-button {
  font-family: "Courier New", Courier, monospace;
  font-size: 20px;
  font-weight: bold;
}
.el-table {
  padding-top: 20px;
}
.form {
  height: 300px;
  margin-left: 5px;
}
.banner {
  .cycle {
    width: 100%;
    height: 320px;
    position: relative;
  }

  .cycle img {
    width: 100%;
    height: 100%;
    border-radius: 20px;
    position: absolute;
    background-color: gainsboro;
    display: block;
  }

  .cycle button {
    width: 20px;
    height: 55px;
    position: absolute;
    top: 43%;
    right: 0px;
    opacity: 0.5;
    text-align: center;
  }

  .cycle .left {
    left: 0px;
  }

  .cycle .left i {
    margin-left: -10px;
  }

  .bottom {
    position: absolute;
    bottom: 1px;
    left: calc(50% - 27px);
  }

  .cycle .bottom span {
    width: 14px;
    height: 14px;
    border-radius: 7px;
    background-color: rgba(110, 102, 102, 0.849);
    opacity: 0.4;
    margin: 10px;
    display: inline-block;
    /* span是行内元素 */
  }

  /* 圆圈圈激活后*/
  .cycle .active {
    /*数值分别是：水平偏移，上下偏移，模糊，大小，颜色 */
    box-shadow: 0px 0px 2px 2px #53a8ff;
    background-color: #a0cfff !important;
    opacity: 0.6;
  }
}
.title {
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  padding-bottom: 20px;
}
</style>